<template>
  <div v-for="i in 12" :key="i" class="record-wrapper">
    <section>
      <div class="content">
        <div class="item">试卷名称: 第三章测验第三章测验第三章测验</div>
        <div class="item">出卷时间: 2017-19-23</div>
        <div class="item">参与人数: 72</div>
      </div>
      <div class="actions">
        <button
          @click="
            $router.push({
              path: '/paper/' + i,
              query: { name: '第三章测验第三章测验第三章测验' },
            })
          "
        >
          查看试卷
        </button>
        <button
          @click="
            $router.push({
              path: '/grade/' + i,
              query: { name: '第三章测验第三章测验第三章测验' },
            })
          "
        >
          查看成绩
        </button>
      </div>
    </section>
  </div>
</template>
<script>
export default {};
</script>

<style lang='scss' scoped>
.record-wrapper {
  font-size: 0.9rem;
  margin: 0 2em;
  display: flex;
  justify-content: center;
  section {
    margin-top: 2em;
    padding: 1.8em 1em;
    width: 100%;
    max-width: 800px;
    display: grid;
    grid-template-columns: calc(100% - 8em) 8em;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 0px 5px gray;
    .content {
      display: grid;
      cursor: pointer;
      .item + .item {
        padding-top: 0.6em;
      }
    }
    .actions {
      flex-direction: column;
      justify-content: space-between;
      display: flex;
      button {
        margin-top: 1em;
        padding: 0.4em 0.4em;
      }
    }
  }
}
@media screen and (max-width: 620px) {
  .record-wrapper {
    margin: 0 0.8em;
  }
}
</style>